<template>
  <div class="remain">
    <BreadCrumb class="remain__bread-crumb">
      <template #date>
        <div class="remain__bread-crumb__date">
          <el-radio-group v-model="dateRadioSelect" @change="targetChange">
            <el-radio-button v-for="item in dateRadioOptions" :key="item.value" :label="item.value">
              {{ item.label }}
            </el-radio-button>
          </el-radio-group>
          <el-select v-model="dateSelect" placeholder="不限">
            <el-option
              v-for="item in dateOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <div>
            <el-date-picker
              v-model="dateRange"
              style="width: 100%;"
              type="daterange"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              :shortcuts="dateShortcut"
              @change="dateChange"
            />
          </div>
        </div>
      </template>
    </BreadCrumb>
    <section class="base-page-container remain__search">
      <div class="remain__search__type">
        <el-radio-group v-model="targetSelect" @change="targetChange">
          <el-radio-button v-for="item in targetOptions" :key="item.value" :label="item.value">
            {{ item.label }}
          </el-radio-button>
        </el-radio-group>
      </div>
      <BaseRadioGroupLabelItem
        v-model:select="deviceSelect"
        label="设备"
        :no-margin-bottom="true"
        :options="deviceOptions"
        @change="deviceChange"
      />
    </section>
    <!-- 表格 -->
    <section class="base-page-container">
      <ColorfulTable :table-data="tableData" :column="columns" />
    </section>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive } from 'vue';
import { BaseRadioGroupLabelItem } from '@/components/base-form';
import BreadCrumb from '@/components/base-bread-crumb/index.vue';
import { ColorfulTable } from '@/components/colorful-table';
import { deviceOptions } from './data.ts';
import { toolGetDateRangeShorcuts as dateShortcut } from '@/utils';

defineOptions({
  name: 'KgjPageSceneRemain'
});
const deviceSelect = ref(0);
const deviceChange = (val: string | number | boolean) => {
  console.log(val);
};
const dateRadioSelect = ref(1);
const dateRadioOptions: any[] = reactive([
  { label: '日', value: 1 },
  { label: '周', value: 2 },
  { label: '月', value: 3 }
]);
const dateSelect = ref(null);
const dateOptions: any[] = reactive([{}]);
const targetSelect = ref(1);
const targetOptions: any[] = reactive([
  { label: '新用户留存', value: 1 },
  { label: '活跃用户留存', value: 2 }
]);
const targetChange = () => {
  console.log(1);
};

const dateRange = ref(null);
const dateChange = () => {
  console.log(11);
};
// 表格
const columns = ref([
  {
    label: '时间',
    prop: 'time',
    width: 150,
    showTooltip: true
  },
  {
    label: '新增用户',
    prop: 'users',
    width: 100,
    showTooltip: true
  },
  {
    label: '1天后',
    prop: 'day1_cnt'
  },
  {
    label: '2天后',
    prop: 'day2_cnt'
  },
  {
    label: '3天后',
    prop: 'day3_cnt'
  },
  {
    label: '4天后',
    prop: 'day4_cnt'
  },
  {
    label: '5天后',
    prop: 'day5_cnt'
  },
  {
    label: '6天后',
    prop: 'day6_cnt'
  },
  {
    label: '7天后',
    prop: 'day7_cnt'
  },
  {
    label: '14天后',
    prop: 'day14_cnt'
  },
  {
    label: '30天后',
    prop: 'day30_cnt'
  },
  {
    label: '60天后',
    prop: 'day60_cnt'
  }
]);
const tableData = reactive([
  {
    time: '2021-12-03',

    users: '张三',
    day1_cnt: 0,
    day2_cnt: 99
  },
  {
    time: '2021-12-03',

    users: '张三',
    day1_cnt: 40
  },
  {
    time: '2021-12-03',

    users: '张三',
    day1_cnt: 60
  },
  {
    time: '2021-12-03',

    users: '张三',
    day1_cnt: 80
  }, {
    time: '2021-12-03',

    users: '张三',
    day1_cnt: 99
  }
]);
</script>
<style lang="scss" scoped>
.remain {
  &__bread-crumb {
    flex: 1;

    &__date {
      display: flex;

      :deep(.el-select) {
        margin: 0 12px;
      }
    }

    :deep(.el-range-editor).el-input__wrapper {
      box-sizing: border-box;

    }
  }

  &__title {
    height: 24px;
    margin-bottom: $baseMarginBottom;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    color: #303133;
  }

  &__search {
    &__type {
      margin-bottom: 12px;
    }
  }
}
</style>
